<template>
	<div class="cvu-drawer"
        :class="{
            'cvu-drawer-left': placement == 'left',
            'cvu-drawer-right': placement == 'right',
            'cvu-drawer-show': show,
            'cvu-drawer-hide': !show,
        }"
    >
        <div class="cvu-drawer-mask" @click.stop="_close"></div>
		<div class="cvu-drawer-warp" :style="{'width': width}">
            <div class="cvu-drawer-header">
                <div class="cvu-drawer-title">{{ title }}</div>
                <div class="cvu-drawer-close" v-if="!hideClose" @click.stop="_close"><i class="iconfont iconclose"></i></div>
            </div>
            <div class="cvu-drawer-content">
                <slot />
            </div>
        </div>
	</div>
</template>

<script>
import common from '../../../until/common'
export default {
    name: 'cvu-drawer',
    components: {},
    props: {
        // 标题
        title: {
            type: String,
            default: ''
        },
        // 是否显示
        show: {
            type: Boolean,
            default: false
        },
        // left: 左侧弹出  right: 右侧弹出
        placement: {
            type: String,
            default: 'right'
        },
        // 宽度 默认70vw
        width: {
            type: String,
            default: '70vw'
        },
        // 是否隐藏关闭icon
        hideClose: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {}
    },
    beforeDestroy() {
        // 处理显示drawer时滚动条穿透问题
        common.setScrollbar(document.querySelector('body'), false)
    },
    watch: {
        // 观察是否显示drawer抽屉
        show: {
            handler(newVal) {
                // 处理显示drawer时滚动条穿透问题
                newVal ? common.setScrollbar() : common.setScrollbar(document.querySelector('body'), false)
                // drawer抽屉显示隐藏监听
                this.$emit('on-visible', {
                    code: newVal
                })
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        // 关闭
        _close() {
            this.$emit('on-close')
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../../style/_index.scss';
.cvu-drawer{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    width: 100vw;
    height: 100vh;
    // 左侧弹出抽屉
    &.cvu-drawer-left{
        .cvu-drawer-warp{
            right: none;
            left: -100%;
        }
    }
    // 右侧弹出抽屉
    &.cvu-drawer-right{
        .cvu-drawer-warp{
            left: none;
            right: -100%;
        }
    }
    &.cvu-drawer-show{
        visibility: visible;
        opacity: 1;
        transition: all .3s;
        &.cvu-drawer-left .cvu-drawer-warp{
            animation: cvu-drawer-left-warp-show .4s ease-in forwards;
        }
        &.cvu-drawer-right .cvu-drawer-warp{
            animation: cvu-drawer-right-warp-show .4s ease forwards;
        }
    }
    &.cvu-drawer-hide{
        visibility: hidden;
        opacity: 0;
        transition: all .3s;
        &.cvu-drawer-left .cvu-drawer-warp{
            animation: cvu-drawer-left-warp-hide .4s ease-in forwards;
        }
        &.cvu-drawer-right .cvu-drawer-warp{
            animation: cvu-drawer-right-warp-hide .4s ease-in forwards;
        }
    }
    .cvu-drawer-mask{
        width: 100%;
        height: 100%;
        background: $mask-bg;
    }
    .cvu-drawer-warp{
        position: absolute;
        top: 0;
        right: -100%;
        z-index: 999;
        width: 70vw;
        height: 100vh;
        background: #ffffff;
        .cvu-drawer-header{
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
            padding: .6rem .8rem 14px .8rem;
            box-sizing: border-box;
            .cvu-drawer-title{
                font-size: 18px;
                color: $main-font-color;
                font-weight: bold;
            }
            .cvu-drawer-close{
                position: absolute;
                top: 10px;
                right: 14px;
                width: 30px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                cursor: pointer;
                i{
                    font-size: 20px;
                }
            }
            // &::before{
            //     position: absolute;
            //     top: 0;
            //     left: 0;
            //     content: '';
            //     width: 5px;
            //     height: 100%;
            //     background: $light-color;
            // }
            // &::after{
            //     position: absolute;
            //     bottom: 0;
            //     left: 0;
            //     content: '';
            //     width: 100%;
            //     height: 1px;
            //     background: rgba(100, 100, 100, .4);
            //     transform: scaleY(.5);
            // }
        }
        .cvu-drawer-content{
            height: calc(100vh - 75px);
            padding: .3rem .8rem .5rem .8rem;
            box-sizing: border-box;
            overflow: auto;
        }
    }
}
// 左侧抽屉显示
@-webkit-keyframes cvu-drawer-left-warp-show{
    from{ left: -100%; }
    to{ left: 0; }
}
@keyframes cvu-drawer-left-warp-show{
    from{ left: -100%; }
    to{ left: 0; }
}
// 左侧抽屉隐藏
@-webkit-keyframes cvu-drawer-left-warp-hide{
    from{ left: 0; }
    to{ left: -100%; }
}
@keyframes cvu-drawer-left-warp-hide{
    from{ left: 0; }
    to{ left: -100%; }
}

// 右侧抽屉显示
@-webkit-keyframes cvu-drawer-right-warp-show{
    from{ right: -100%; }
    to{ right: 0; }
}
@keyframes cvu-drawer-right-warp-show{
    from{ right: -100%; }
    to{ right: 0; }
}
// 右侧抽屉隐藏
@-webkit-keyframes cvu-drawer-right-warp-hide{
    from{ right: 0; }
    to{ right: -100%; }
}
@keyframes cvu-drawer-right-warp-hide{
    from{ right: 0; }
    to{ right: -100%; }
}
</style>
